<template>
	<view>
		<up-popup :show="show" :closeable="false">
			<view class="popup-btn u-flex u-flex-between">
				<view class="btn-cancel" @click="onCancel">取消</view>
				<view class="btn-contrim" @click="onConfirm">确定</view>
			</view>
			<view class="popup-content">
				<scroll-view scroll-y="true" class="popupMain">
					<up-checkbox-group v-model="checkboxValue" placement="column" iconPlacement="right">
						<up-checkbox :customStyle="{ padding:'12rpx 0',borderBottom:'1px solid #dadbde'}"
							v-for="(item, index) in columns" :key="index" :label="item.name" :name="item.value">
						</up-checkbox>
					</up-checkbox-group>
				</scroll-view>
			</view>
		</up-popup>
	</view>
</template>

<script>
	export default {
		name: "multiplePicker",
		props: {
			show: {
				type: Boolean,
				default: false
			},
			columns: {
				type: Array,
				default: () => []
			},
			selectValue: {
				type: Array,
				default: () => []
			}
		},
		watch:{
			selectValue(val){
				this.checkboxValue=val;
			}
		},
		emits: ['cancel', 'confirm'],
		data() {
			return {
				checkboxValue: this.selectValue
			}
		},
		methods: {
			/*取消*/
			onCancel() {
				this.$emit('cancel')
			},
			/**确认**/
			onConfirm() {
				this.$emit('confirm', this.checkboxValue)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-btn {
		padding: 20rpx 30rpx;

		.btn-contrim {
			color: #246eff;
		}

		.btn-cancel {
			color: #999;
		}
	}

	.popup-content {
		padding: 20rpx 40rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.popupMain {
		min-height: 150rpx;
		max-height: 50vh;
	}
</style>